<template>
  <section>
    <div class="container">
      <div class="row">
        <div
          class="title d-flex flex-column justify-content-center align-items-center"
        >
          <slot name="small"></slot>
          <slot name="h1"></slot>
          <slot></slot>
          <slot name="section-divider">
            <div class="section-divider rounded-pill"></div>
          </slot>
        </div>
      </div>
      <div class="row">
        <slot name="sectionBody"></slot>
      </div>
    </div>
  </section>
</template>
<script>
export default {};
</script>
<style lang="less">
:root {
  --text-color: #0a1b4f;
  --p-color: #7f8897;
  --title-color: #4bb0f7;
  --active-color: #4db1f7;
}
section {
  clear: both;
  padding-top: 3.75rem;
  padding-bottom: 5.625rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  border-bottom: 1px solid rgb(240, 236, 236);
}

.row .title small {
  color: var(--title-color);
  font-weight: 600;
  border-radius: 6px;
  background-color: #ebf6ff;
  padding: 3px 17px;
  margin-bottom: 1.25rem;
}

.row .title h1 {
  color: var(--text-color);
  font-weight: 900;
}

h1,
h2,
h3,
h4 {
  letter-spacing: -1px;
}

.row .col h3 {
  padding-left: 2rem;
  padding-bottom: 0.9375rem;
  padding-top: 0.9375rem;
  color: var(--text-color);
}

.col h4 {
  color: var(--text-color);
  font-weight: 700;
}

.row p {
  color: var(--p-color);
  font-weight: 600;
  position: relative;
  margin-bottom: 1rem;
}
.title .section-divider {
  position: relative;
  width: 5.625rem;
  height: 0.3125rem;
  background-color: #d8eefe;
  margin-top: 1.25rem;
}

.section-divider:after {
  content: "";
  position: absolute;
  width: 0.5625rem;
  height: 0.5625rem;
  background-color: var(--title-color);
  left: 0;
  top: -0.125rem;
  border-radius: 50%;
  animation: move 3s linear infinite;
}

@keyframes move {
  100% {
    left: 100%;
  }
}
</style>
